How To Create a Home Page
This is a step by step guide on how to create your first page with PageSpinner. This guide is also included in the PageSpinner Guide, available in the Help menu if AppleGuide is installed.
- Learn the basics of HTML
- How do I create a Home Page?
- How do I preview an HTML page?
- HTML line breaks
- Adding a link to another page
- Transfer HTML files to an HTTP Server
How do I use the HTML Assistant?
When you have created your first page using the 6 steps above and have used the HTML Assistant, you can do the following to learn more about PageSpinner and HTML:
-
Use the PageSpinner AppleGuide. The Guide contains information about many more topics and contains interactive coach marks displayed on the screen to let you learn more about WWW and how to spin your pages with PageSpinner.
Check out the New... dialog in the File menu to create different types of pages using the built-in templates.
Try the HTML Examples available in the Windows menu.
Use Balloon help in HTML Assistant to learn about the options that are available in the topics.
Check out the Examples folder in the PageSpinner folder. You can view the index of the examples in your browser by selecting the menu item More Examples in the Help menu.
Visit the SpinnerWorld Web site, where you will find links to HTML references, tutorials, services and tips about working with PageSpinner. You'll find direct links to SpinnerWorld's HTML and JavaScript Guides in PageSpinner's Help menu.
Learn the basics of HTML
Before you begin you will have to understand the basics of HTML.An HTML Page is a text file that is structured by HyperText Markup Tags. A tag is just some text that is enclosed by <>, eg <BODY>.
Many tags consist of a start tag and a matching end tag, eg <BODY>....some text... </BODY>. The end tag has the same name as the start tag but contains a / before the actual name.
The HTML standard specifies the names of the tags and what effect they will have when the page is rendered by an HTML browser.
An HTML Page is a text file that contains at least the following tags:
All contents in the page should be located between the <HTML> and </HTML> tag. Inside the HTML tag you should always have a HEAD tag section and a BODY tag section.
- HEAD
- Inside the HEAD tag you supply general information about the document such as the title of the document. This title is displayed in the browser's window title when you view the page. JavaScripts are also usually placed inside the HEAD tag.
<HEAD>
<TITLE>My Home Page!</TITLE>
</HEAD>You should not place any text inside the HEAD section.
- BODY
- Inside the BODY tag you enter the contents you would like to display on your HTML page.
How Do I Create a Home Page?
OK, it is now time create your own Home Page.
Do This:
Select New... in the File menu.
Select Empty Page in the list of different pages in the New... dialog that is displayed.
NOTE: You may later use the other options in the list in this New... dialog to create a specific type of page.
Enter the title of the page in the Title field.
If you wish, you can also select colors for the text, background and links on your page in the Color box by clicking in the color boxes.
Click on the New button.
The skeleton of an empty HTML page is now created and is open in a new untitled window.
Position the cursor between the start and end <BODY> tag by clicking on the empty line.
Enter any text you would like to be displayed on your home page between the start and end BODY tag.
You can also Paste or Drag and drop text from other applications.
When you are done creating some of the text you want to be displayed on your page, you can view it with your Web browser.
How do I preview an HTML page?
Your document must have been saved to disk before you can preview the page in a browser.
Save your file to disk by using the Save Command in the File menu.
Only use characters between a-z and 0-9 when you name the file, because these are the only characters supported by all HTTP Servers on all platforms.
You should also end the name of the file with .html or .htm to indicate that it is a file containing HTML tags.
- Example:
- index.html
Click on the Preview button in the windows toolbar to to view it in the browser:
You may optionally use the Preview menu item in the File menu.
If the browser doesn't launch, you may have to specify the application to use for browsing in the Browser... item in the menu File : Preferences : Helpers...
HTML line breaks
When you previewed your page in the Browser you might have found that all the line breaks you used to format your text were missing. The text just flowed like a very long paragraph.
This happens because HTML ignores any standard Macintosh line breaks you put in your text. It also ignores any tabs and multiple spaces in the text.
To force the text to start on a new line or in a new paragraph you will need to insert one of the the following special HTML tags:
- Line break <BR>
- Paragraph <P>...</P>
- Horizontal Line <HR>
- Line break <BR>
Insert the <BR> tag to force the following text to start on a new line.
This tag is available in the menu Tags:Line Break
- Paragraph <P>...</P>
Insert the <P> tag pair and enter you contents inside the the tag pair.
To quickly enclose a section of selected text with the paragraph tags you can press Command+Return.
Paragraphs are usually displayed with a blank line inserted between them. In early versions of HTML the paragraph tag could optionally be written without its ending </P> tag.
This tag is available in the menu Tags:Paragraph
- Horizontal Line <HR>
This tag is available in the menu Tags:Horizontal Line...
Since these tags are very common when typing text, PageSpinner provides the following keyboard shortcuts:
Adding a link to another page
A link inside your HTML page gives the user the option of loading and viewing the contents in another file just by selecting the link. We will now add a link to PageSpinner's Home Page on the Web.
Do This:
Enter the following text somewhere inside the BODY section of your HTML page:
This page was created with PageSpinner.
Select the word "PageSpinner" by double clicking on it. This word will be used as the link.
Select Link in the HTML Assistant Menu in the Menu.
The Link dialog is now being displayed in the HTML Assistant Window.
The text you selected is displayed in the "Text:" field. You may modify this text if you want.
Type the following text in the field
"Enter URL or named anchor to link to":
http://www.optima-system.com/pagespinner/index.html
This is the address (URL) of PageSpinner's Home Page.
Click the Apply button to apply the link tags on the selected text in your document.
The HTML tags that specify a link should be inserted surrounding the text "PageSpinner". All text between the <A HREF=...> and </A> tags will act as a link to the specified page.
Click on the Preview button in the Toolbar to preview your page.
If you are connected to the Internet and the server at www.optima-system.com is working you should be able to go to PageSpinner's Home by selecting the link in your own Home Page.
Transfer HTML files to an HTTP Server
HTML files can be transferred to an HTTP Server by the use of one of the following popular protocols:
- FTP
- AppleShare
- NFS
FTP is the most popular protocol used for sending files to web servers. Contact your Internet provider or local Webmaster for further information and user settings for using FTP.
You should set your transfer application to use ASCII or TEXT when transferring HTML files created with PageSpinner or other HTML editors.
To transfer images, audio or video files you need to transfer these as Binary files (and not MacBinary).
If you are saving files in the ISO 8859-1 format (default) and use Fetch to upload the files, you will need to select "Customize:Misc" in Fetch and uncheck "Translate ISO characters" to have international characters transferred correctly.
If you have FTP access to the Web directory, you can use PageSpinner's Save to FTP server menu item to tell a scriptable transfer application to transfer a page to a specified server.
Helper applications for using Anarchie (Pro), Fetch and NetFinder to upload the current file are included with PageSpinner 3.
Do this:
Select the Web Site option in the preferences to specify the transfer application, URL and password for the server. Click the button Show Info for important info on how to use this command.
This command is available in the menu File:Preferences:Web Site...
When everyting is set up, you can use select File:Save to Web Server to save the current file on the ftp server.
If you need to change to another server before saving a file, press the Option key when selecting Save to Web Server to quickly edit the preferences.
How do I use the HTML Assistant?
PageSpinner uses the HTML Assistant Window instead of modal dialogs to give you a more flexible way of creating and maintaining your HTML pages.
The HTML Assistant is displayed in a non modal dialog that allows you to switch between different document windows and other applications.
Do this:
Select the text in your document that you would like to format using HTML tags.
Bring the HTML Assistant Window to front by selecting it in the Windows menu.
This is the menu bar icon for the HTML Assistant:
HTML Assistant will present the options you can use to create a particular HTML tag.
The topics that are supported by HTML Assistant are displayed in HTML Assistants Topics pop up menu and in the Assistant menu in PageSpinner's menu bar.
While you are working in the HTML Assistant Window you can switch between the different HTML topics by using the menu items.
- Apply button
- Some topics apply formatting, linkage or information tagging of the selected text in your document. They will also let you edit the selected text inside the Text field in the HTML Assistant window. When this is the case the button in the lower right corner will be named Apply.
- Insert button
- Other topics the HTML Assistant Window just insert a single tag in your current document. When this is the case the button in the lower right corner will be named Insert.
Tip
You can always use Balloon Help for any option in HTML Assistant if you need an explanation of a field or an option.